<template>
	<!-- 顶部导航条：首页、公告、申请、规章文件、工具下载 -->
	<scroll-view scroll-x="true" class="scrollView">
		<view class="boxs">首页</view>
		<view class="boxs">公告</view>
		<view class="boxs">申请</view>
		<view class="boxs">规章文件</view>
		<view class="boxs">工具下载</view>
	</scroll-view>
	<!-- 轮播图 -->
	<view class="swiperView">
		<swiper class="swiperLayout">
			<swiper-item >
				<view >图片1</view>
			</swiper-item>
			<swiper-item>
				<view >图片2</view>
			</swiper-item>
			<swiper-item>
				<view >图片3</view>
			</swiper-item>
			<swiper-item>
				<view >图片4</view>
			</swiper-item>
			<swiper-item>
				<view >图片5</view>
			</swiper-item>
		</swiper>
	</view>
	
	
</template>

<script setup>
	
</script>

<style lang="scss">//提供最大的灵活性和兼容性，让你可以在同一个文件中同时使用CSS和SCSS的特性。
	.scrollView{
		width: 100%;//屏幕长宽百分比
		height: 20%;
		background-color: gray;
		border: 1px solid red ;
		//设置横向滚动：https://blog.csdn.net/yunchong_zhao/article/details/105994964
		white-space: nowrap;//规定段落中的文本不进行换行，三端都支持：https://blog.csdn.net/amy0821/article/details/52090156
	}
	.boxs{
		// display:inline; 内联元素，简单来说就是在同一行显示。
		// display:block; 块级元素，简单来说就是就是有换行，会换到第二行。
		// display:inline-block; 就是在同一行内的块级元素。
		display: inline-block;
		width: 20%;
		height: 30%;
		margin: 5px;
		background-color: greenyellow;
		
	}
	.swiperView{
		.swiperLayout{
			width: 100vw;
			height: 20vh;
			border-bottom: 1px solid green;
			background-color: green;
			swiper-item:nth-child(2n){//https://blog.csdn.net/2302_80198073/article/details/137742438
				background: orange;
			}
		}
		
	}
</style>
